<template>
  <div class="activity-status-tag activity-status-tag-offline" v-if="parseInt(activityType) === 0">
    <div class="activity-status-tag-offline-icon"><GIcon name="gt-line-location" color="#088F4E" /></div>
    <div class="activity-status-tag-text">线下</div>
  </div>
  <div class="activity-status-tag activity-status-tag-online" v-else-if="parseInt(activityType) === 1">
    <div class="activity-status-tag-online-icon"><GIcon name="gt-line-computer" color="#2951E0" /></div>
    <div class="activity-status-tag-text">线上</div>
  </div>
</template>
<script lang="ts" setup>
const props = defineProps<{
  activityType: number| string
}>();
</script>
<style lang="scss" scoped>
.activity-status-tag {
  font-size: 14px;
  font-weight: 400;
  border-radius: 4px;
  display: inline-flex;
  height: 24px;
  &-text {
    line-height: 24px;
    margin: 0 4px;
    display: flex;
    align-items: center;
  }
  &-online {
    border: 1px solid #DBE2FA;
    color: #2951E0;
     &-icon {
      padding: 2px 4px;
      background: #DBE2FA;
    }
  }
  &-offline {
    border-radius: 4px;
    border: 1px solid #D6ECE2;
    color: #088F4E;
    &-icon {
      padding: 2px 4px;
      background: #D6ECE2;
    }
  }
}
</style>